<template>
  <view class="app-container">
    <image class="background" src="/static/images/background.jpg" mode="aspectFill"></image>

    <view class="bar-box" :style="{ marginTop: titleMargin + 'px' }">
      <image class="back" src="/static/images/back.png" @click="back"></image>
      <view class="title">我的资料</view>
    </view>

    <view class="info">
      <image @click="uploadAvatar" mode="aspectFill" class="avatar" :src="info.avatar_path ? info.avatar_path : '/static/images/default_avatar.png'"></image>
      <view class="name-box">
        <view class="name">{{ info.nickname }}</view>
        <image v-if="info.rz_status == 1" class="icon" src="/static/images/name_icon.png"></image>
      </view>
      <view class="id">ID：{{ info.id_num }}</view>
    </view>

    <view class="main-box">
      <view class="follow-box">
        <view class="tab-box">
          <view class="text">关注我的</view>
          <view class="count">（{{ info.follow_me_count }}）</view>
        </view>
        <view class="tab-box">
          <view class="text">我关注的</view>
          <view class="count">（{{ info.me_follow_count }}）</view>
        </view>
      </view>

      <scroll-view scroll-y enable-flex class="scroll">
        <view class="info-box">
          <view class="set-box">
            <view class="xx">基本信息</view>
            <image class="set" src="/static/images/set.png" @click="openInfoModal(1)"></image>
          </view>
          <view class="row">
            <view class="text">性别：{{ info.gender }}</view>
            <view class="text">年份：{{ info.birth_year }}</view>
          </view>
          <view class="row">
            <view class="text">居住：{{ info.residence }}</view>
            <view class="text">户籍：{{ info.hukou }}</view>
          </view>
          <view class="row">
            <view class="text">身高：{{ info.height ? info.height + 'cm' : '' }}</view>
            <view class="text">体重：{{ info.weight ? info.weight + 'kg' : '' }}</view>
          </view>
          <view class="row">
            <view class="text">职业：{{ info.occupation }}</view>
            <view class="text">体型：{{ info.body_type }}</view>
          </view>
        </view>
        <view class="info-box">
          <view class="set-box">
            <view class="xx">详细信息</view>
            <image class="set" src="/static/images/set.png" @click="openInfoModal(2)"></image>
          </view>
          <view class="row">
            <view class="text">婚况：{{ info.marital_status }}</view>
            <view class="text">学历：{{ info.education_level }}</view>
          </view>
          <view class="row">
            <view class="text">公司：{{ info.company_type }}</view>
            <view class="text">年收入：{{ info.annual_income }}</view>
          </view>
          <view class="row">
            <view class="text">住房：{{ info.housing_status }}</view>
            <view class="text">车辆：{{ info.car_status }}</view>
          </view>
        </view>
        <view class="info-box">
          <view class="set-box">
            <view class="xx">择偶要求</view>
            <image class="set" src="/static/images/set.png" @click="openInfoModal(3)"></image>
          </view>
          <view class="row">
            <view class="text">年龄：{{ info.requirement_age }}</view>
            <view class="text">身高：{{ info.requirement_height }}</view>
          </view>
          <view class="row">
            <view class="text">体型要求：{{ info.requirement_body_type }}</view>
            <view class="text">婚姻状况：{{ info.requirement_marital_status }}</view>
          </view>
          <view class="row">
            <view class="text">学历要求：{{ info.requirement_education_level }}</view>
            <view class="text">年收入：{{ info.requirement_annual_income }}</view>
          </view>
          <view class="row">
            <view class="text">居住地：{{ info.requirement_residence }}</view>
            <view class="text">小孩要求：{{ info.requirement_has_children }}</view>
          </view>
          <view class="row">
            <view class="text">购房：{{ info.requirement_buying_status }}</view>
            <view class="text">购车：{{ info.requirement_car_status }}</view>
          </view>
        </view>

        <view class="btn-box">
          <view class="btn xc" @click="openPhotosModal">查看相册</view>
          <view class="btn lx" @click="openContactModal">联系方式</view>
        </view>
      </scroll-view>
    </view>

    <!-- 基本信息、详细信息、择偶要求 弹框 START -->
    <view v-if="infoModal" class="modal-overlay" @click="closeInfoModal">
      <view class="modal" @click.stop>
        <view class="modal-content">
          <!-- 基本信息修改弹框 -->
          <block v-if="info_modal_type === 1">
            <image class="close" src="/static/images/close.png" @click="closeInfoModal"></image>
            <view class="modal-title">基本信息</view>
            <view class="row-box">
              <view class="row">
                <view class="text">姓名</view>
                <input type="text" class="input" placeholder="请输入姓名" @input="changeUsername" :value="basic_info.username"/>
              </view>
              <view class="row">
                <view class="text">性别</view>
                <view class="sex-box">
                  <view @click="chooseGender('男')" :class="['sex', basic_info.gender == '男' ? 'active' : '']">男</view>
                  <view @click="chooseGender('女')" :class="['sex', basic_info.gender == '女' ? 'active' : '']">女</view>
                </view>
              </view>
              <view class="row">
                <view class="text">年份</view>
                <picker class="res-box" mode="date" :value="basic_info.birth_date" @change="changeBirthDate">
                  <view class="row">
                    <view class="res">{{ basic_info.birth_year }}</view>
                    <image class="icon" src="/static/images/choose.png"></image>
                  </view>
                </picker>
              </view>
              <view class="row" @click="openPopup('residence')">
                <view class="text">居住</view>
                <view class="res-box">
                  <view class="res">{{ basic_info.residence }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('hukou')">
                <view class="text">户籍</view>
                <view class="res-box">
                  <view class="res">{{ basic_info.hukou }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('height')">
                <view class="text">身高</view>
                <view class="res-box">
                  <view class="res">{{ basic_info.height ? basic_info.height + 'cm' : '' }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('weight')">
                <view class="text">体重</view>
                <view class="res-box">
                  <view class="res">{{ basic_info.weight ? basic_info.weight + 'kg' : '' }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('occupation')">
                <view class="text">职业</view>
                <view class="res-box">
                  <view class="res">{{ basic_info.occupation }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('body_type')">
                <view class="text">体型</view>
                <view class="res-box">
                  <view class="res">{{ basic_info.body_type }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
            </view>
          </block>
          <!-- 详细信息修改弹框 -->
          <block v-else-if="info_modal_type === 2">
            <image class="close" src="/static/images/close.png" @click="closeInfoModal"></image>
            <view class="modal-title">详细信息</view>
            <view class="row-box">
              <view class="row" @click="openPopup('marital_status')">
                <view class="text">婚况</view>
                <view class="res-box">
                  <view class="res">{{ detail_info.marital_status }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('education_level')">
                <view class="text">学历</view>
                <view class="res-box">
                  <view class="res">{{ detail_info.education_level }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('company_type')">
                <view class="text">公司</view>
                <view class="res-box">
                  <view class="res">{{ detail_info.company_type }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('annual_income')">
                <view class="text">年收入</view>
                <view class="res-box">
                  <view class="res">{{ detail_info.annual_income }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('housing_status')">
                <view class="text">住房</view>
                <view class="res-box">
                  <view class="res">{{ detail_info.housing_status }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('car_status')">
                <view class="text">车辆</view>
                <view class="res-box">
                  <view class="res">{{ detail_info.car_status }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
            </view>
          </block>
          <!-- 择偶要求修改弹框 -->
          <block v-else>
            <image class="close" src="/static/images/close.png" @click="closeInfoModal"></image>
            <view class="modal-title">择偶要求</view>
            <view class="row-box">
              <view class="row" @click="openPopup('requirement_age')">
                <view class="text">年龄范围</view>
                <view class="res-box">
                  <view class="res">{{ requirement_info.requirement_age }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('requirement_height')">
                <view class="text">身高范围</view>
                <view class="res-box">
                  <view class="res">{{ requirement_info.requirement_height }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('requirement_body_type')">
                <view class="text">体型要求</view>
                <view class="res-box">
                  <view class="res">{{ requirement_info.requirement_body_type }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('requirement_marital_status')">
                <view class="text">婚姻状况</view>
                <view class="res-box">
                  <view class="res">{{ requirement_info.requirement_marital_status }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('requirement_education_level')">
                <view class="text">学历要求</view>
                <view class="res-box">
                  <view class="res">{{ requirement_info.requirement_education_level }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('requirement_annual_income')">
                <view class="text">年收入</view>
                <view class="res-box">
                  <view class="res">{{ requirement_info.requirement_annual_income }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('requirement_residence')">
                <view class="text">居住地</view>
                <view class="res-box">
                  <view class="res">{{ requirement_info.requirement_residence }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('requirement_has_children')">
                <view class="text">小孩要求</view>
                <view class="res-box">
                  <view class="res">{{ requirement_info.requirement_has_children }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('requirement_buying_status')">
                <view class="text">购房</view>
                <view class="res-box">
                  <view class="res">{{ requirement_info.requirement_buying_status }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
              <view class="row" @click="openPopup('requirement_car_status')">
                <view class="text">购车</view>
                <view class="res-box">
                  <view class="res">{{ requirement_info.requirement_car_status }}</view>
                  <image class="icon" src="/static/images/choose.png"></image>
                </view>
              </view>
            </view>
          </block>
        </view>
        <view class="save-btn" @click="saveUserDetails()">保存</view>
      </view>
    </view>
    <!-- 基本信息、详细信息、择偶要求 弹框 END -->

    <!-- 基本信息、详细信息、择偶要求 修改弹框 START -->
    <view class="popup-overlay" :class="{ 'show': popup }" @click="closePopup">
      <view class="popup-content" @click.stop>
        <!-- 基本信息-居住 -->
        <block v-if="popupType === 'residence'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="residenceChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in region" :key="index">{{ item.name }}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in region[residenceChooseValue[0]].city_list" :key="index">{{ item.name }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 基本信息-户籍 -->
        <block v-if="popupType === 'hukou'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="hukouChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in region" :key="index">{{ item.name }}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in region[hukouChooseValue[0]].city_list" :key="index">{{ item.name }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 基本信息-身高 -->
        <block v-if="popupType === 'height'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="heightChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in heightData" :key="index">{{ item }}cm</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 基本信息-体重 -->
        <block v-if="popupType === 'weight'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="weightChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in weightData" :key="index">{{ item }}kg</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 基本信息-职业 -->
        <block v-if="popupType === 'occupation'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="occupationChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in occupationData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 基本信息-体型 -->
        <block v-if="popupType === 'body_type'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="bodyTypeChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in bodyTypeData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 详细信息-婚况 -->
        <block v-if="popupType === 'marital_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="maritalStatusChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in maritalStatusData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 详细信息-学历 -->
        <block v-if="popupType === 'education_level'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="educationLevelChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in educationLevelData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 详细信息-公司 -->
        <block v-if="popupType === 'company_type'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="companyTypeChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in companyTypeData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 详细信息-年收入 -->
        <block v-if="popupType === 'annual_income'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="annualIncomeChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in annualIncomeData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 详细信息-住房 -->
        <block v-if="popupType === 'housing_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="housingStatusChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in housingStatusData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 详细信息-车辆 -->
        <block v-if="popupType === 'car_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="carStatusChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in carStatusData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-年龄范围 -->
        <block v-if="popupType === 'requirement_age'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementAgeChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in ageData" :key="index">{{ item }}岁</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in ageData" :key="index">{{ item }}岁</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-身高范围 -->
        <block v-if="popupType === 'requirement_height'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementHeightChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in heightData" :key="index">{{ item }}cm</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in heightData" :key="index">{{ item }}cm</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-体型 -->
        <block v-if="popupType === 'requirement_body_type'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementBodyTypeChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in bodyTypeData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-婚况 -->
        <block v-if="popupType === 'requirement_marital_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementMaritalStatusChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in maritalStatusData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-学历 -->
        <block v-if="popupType === 'requirement_education_level'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementEducationLevelChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in educationLevelData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-年收入 -->
        <block v-if="popupType === 'requirement_annual_income'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementAnnualIncomeChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in annualIncomeData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-居住地 -->
        <block v-if="popupType === 'requirement_residence'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementResidenceChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in region" :key="index">{{ item.name }}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="item" v-for="(item,index) in region[requirementResidenceChooseValue[0]].city_list" :key="index">{{ item.name }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-小孩要求 -->
        <block v-if="popupType === 'requirement_has_children'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="hasChildrenChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in hasChildrenData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-住房 -->
        <block v-if="popupType === 'requirement_buying_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementHousingStatusChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in housingStatusData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
        <!-- 择偶要求-车辆 -->
        <block v-if="popupType === 'requirement_car_status'">
          <view class="top-box">
            <view class="btn" @click="closePopup">取消</view>
            <view class="btn confirm-btn" @click="confirmChoose">确定</view>
          </view>
          <picker-view :immediate-change="true" :indicator-style="indicatorStyle" :value="requirementCarStatusChooseValue" @change="bindChange" class="picker-view">
            <picker-view-column>
              <view class="item" v-for="(item,index) in carStatusData" :key="index">{{ item }}</view>
            </picker-view-column>
          </picker-view>
        </block>
      </view>
    </view>
    <!-- 基本信息、详细信息、择偶要求 修改弹框 END -->

    <!-- 相册弹框 START -->
    <view v-if="photosModal" class="modal-overlay" @click="closePhotosModal">
      <view class="modal" @click.stop>
        <view class="modal-content">
          <image class="close" src="/static/images/close.png" @click="closePhotosModal"></image>
          <scroll-view scroll-y enable-flex class="photos-box">
            <view class="show-box" v-for="(item, index) in photos_arr" :key="index">
              <image class="del" src="/static/images/close.png" @click.stop="delPhoto(index)"></image>
              <image class="photo" mode="aspectFill" @click="previewImgs(photos_arr, index)" :src="item.path"></image>
            </view>
          </scroll-view>
        </view>
        <view class="btn-box">
          <view class="upload-btn" @click="uploadPhotos">上传</view>
          <view class="save-btn" @click="savePhotos">保存</view>
        </view>
      </view>
    </view>
    <!-- 相册弹框 END -->

    <!-- 联系方式弹框 START -->
    <view v-if="contactModal" class="modal-overlay" @click="closeContactModal">
      <view class="modal" @click.stop>
        <view class="modal-content">
          <image class="close" src="/static/images/close.png" @click="closeContactModal"></image>
          <view class="modal-title">联系方式</view>
          <view class="row-box">
            <view class="row">
              <view class="text">微信</view>
              <input type="text" class="input" @input="changeContact" data-type="wechat" placeholder="请输入微信" :value="contact_info.wechat" style="width: 60%"/>
            </view>
            <view class="row">
              <view class="text">QQ</view>
              <input type="text" class="input" @input="changeContact" data-type="qq" placeholder="请输入QQ" :value="contact_info.qq" style="width: 60%"/>
            </view>
            <view class="row">
              <view class="text">手机</view>
              <input type="text" class="input" @input="changeContact" data-type="mobile" placeholder="请输入手机" :value="contact_info.mobile" style="width: 60%"/>
            </view>
          </view>
        </view>
        <view class="save-btn" @click="saveContact">保存</view>
      </view>
    </view>
    <!-- 联系方式弹框 END -->
  </view>
</template>

<script>
import region from '@/static/json/region.json';

export default {
  data() {
    return {
      swiperIndex: 0, // 当前轮播图索引
      title: '',
      titleMargin: 0, // 动态顶部间距
      info_modal_type: 1,
      infoModal: false,
      photosModal: false,
      contactModal: false,
      info: [],
      // 修改弹框数据 START
      popup: false,
      popupType: '', // 控制弹窗类型
      ageData: Array.from({length: 70 - 18 + 1}, (v, i) => i + 18),
      // 居住地数据
      region: region,
      residenceChooseValue: [0, 0],
      requirementResidenceChooseValue: [0, 0],// 要求
      // 户籍数据
      hukouChooseValue: [0, 0],
      // 身高数据
      heightData: Array.from({length: 200 - 140 + 1}, (v, i) => i + 140),
      heightChooseValue: [0],
      requirementHeightChooseValue: [0, 0],
      // 体重数据
      weightData: Array.from({length: 150 - 40 + 1}, (v, i) => i + 40),
      weightChooseValue: [0],
      // 职业数据
      occupationData: [],
      occupationChooseValue: [0],
      // 体型数据
      bodyTypeData: [],
      bodyTypeChooseValue: [0],
      requirementBodyTypeChooseValue: [0],// 要求
      // 婚况数据
      maritalStatusData: [],
      maritalStatusChooseValue: [0],
      requirementMaritalStatusChooseValue: [0],// 要求
      // 学历数据
      educationLevelData: [],
      educationLevelChooseValue: [0],
      requirementEducationLevelChooseValue: [0],// 要求
      // 公司数据
      companyTypeData: [],
      companyTypeChooseValue: [0],
      // 年收入数据
      annualIncomeData: [],
      annualIncomeChooseValue: [0],
      requirementAnnualIncomeChooseValue: [0],// 要求
      // 住房数据
      housingStatusData: [],
      housingStatusChooseValue: [0],
      requirementHousingStatusChooseValue: [0],
      // 车辆数据
      carStatusData: [],
      carStatusChooseValue: [0],
      requirementCarStatusChooseValue: [0],
      // 年龄数据
      ageData: Array.from({length: 70 - 18 + 1}, (v, i) => i + 18),
      requirementAgeChooseValue: [0, 0],
      // 小孩数据
      hasChildrenData: [],
      hasChildrenChooseValue: [0],
      // 修改弹框数据 END
      indicatorStyle: `height: 50px;`,
      // 表单提交数据 START
      basic_info: {}, // 基本信息
      detail_info: {},// 详细信息
      requirement_info: {},// 择偶要求信息

      //图片上传初始数据
      photos_arr: [],
      photos_id: '',
      max_length: 5,//最多可上传图片数量

      contact_info: {},// 联系方式信息
      // 表单提交数据 END
    };
  },

  created() {
    this.setDynamicMargin()
  },

  onLoad: function () {
    var user_id = uni.getStorageSync('user_id'),
      region = this.region;

    this.$http.post('/index/Api/userInfo', {user_id}).then(res => {
      if (res.data.result === 1) {

        var {
          username, gender, birth_date, birth_year, residence, hukou, height, weight, occupation, body_type,
          marital_status,
          education_level,
          company_type, annual_income, housing_status, car_status, requirement_age, requirement_height,
          requirement_body_type, requirement_marital_status, requirement_education_level, requirement_annual_income,
          requirement_residence, requirement_has_children, requirement_buying_status, requirement_car_status,
          mobile, qq, wechat, occupationData, bodyTypeData, maritalStatusData, educationLevelData,
          companyTypeData, annualIncomeData, housingStatusData, carStatusData, hasChildrenData, photos, photos_arr
        } = res.data.data;

        this.info = res.data.data;
        this.basic_info = {
          username, gender, birth_date, birth_year, residence, hukou, height, weight, occupation, body_type
        };
        this.detail_info = {marital_status, education_level, company_type, annual_income, housing_status, car_status};
        this.requirement_info = {
          requirement_age, requirement_height, requirement_body_type, requirement_marital_status,
          requirement_education_level, requirement_annual_income, requirement_residence, requirement_has_children,
          requirement_buying_status, requirement_car_status
        };
        this.contact_info = {mobile, qq, wechat};

        // 下拉框数据
        // -------------基本信息-------------
        // 居住
        this.residenceChooseValue = residence ? this.findRegionIndex(region, residence) : [0, 0];
        // 户籍
        this.hukouChooseValue = hukou ? this.findRegionIndex(region, hukou) : [0, 0];
        // 身高
        this.height = this.heightData;
        this.heightChooseValue = height ? [this.heightData.indexOf(height)] : [0];
        // 体重
        this.weight = this.weightData;
        this.weightChooseValue = weight ? [this.weightData.indexOf(weight)] : [0];
        // 职业
        this.occupationData = occupationData;
        this.occupationChooseValue = occupation ? [occupationData.indexOf(occupation)] : [0];
        // 体型
        this.bodyTypeData = bodyTypeData;
        this.bodyTypeChooseValue = body_type ? [bodyTypeData.indexOf(body_type)] : [0];
        // -------------详细信息-------------
        // 婚况
        this.maritalStatusData = maritalStatusData;
        this.maritalStatusChooseValue = marital_status ? [maritalStatusData.indexOf(marital_status)] : [0];
        // 学历
        this.educationLevelData = educationLevelData;
        this.educationLevelChooseValue = education_level ? [educationLevelData.indexOf(education_level)] : [0];
        // 公司
        this.companyTypeData = companyTypeData;
        this.companyTypeChooseValue = company_type ? [companyTypeData.indexOf(company_type)] : [0];
        // 年收入
        this.annualIncomeData = annualIncomeData;
        this.annualIncomeChooseValue = annual_income ? [annualIncomeData.indexOf(annual_income)] : [0];
        // 住房
        this.housingStatusData = housingStatusData;
        this.housingStatusChooseValue = housing_status ? [housingStatusData.indexOf(housing_status)] : [0];
        // 车辆
        this.carStatusData = carStatusData;
        this.carStatusChooseValue = car_status ? [carStatusData.indexOf(car_status)] : [0];
        // -------------择偶要求-------------
        // 年龄要求
        var ageData = this.ageData;
        this.requirementAgeChooseValue = requirement_age ? this.findKey(ageData, requirement_age) : [0, 0];
        // 身高要求
        this.requirementHeightChooseValue = requirement_height ? this.findKey(this.heightData, requirement_height) : [0, 0];
        // 体型要求
        this.requirementBodyTypeChooseValue = requirement_body_type ? [bodyTypeData.indexOf(requirement_body_type)] : [0];
        // 婚况要求
        this.requirementMaritalStatusChooseValue = requirement_marital_status ? [maritalStatusData.indexOf(requirement_marital_status)] : [0];
        // 学历要求
        this.requirementEducationLevelChooseValue = requirement_education_level ? [educationLevelData.indexOf(requirement_education_level)] : [0];
        // 年收入要求
        this.requirementAnnualIncomeChooseValue = requirement_annual_income ? [annualIncomeData.indexOf(requirement_annual_income)] : [0];
        // 居住地要求
        this.requirementResidenceChooseValue = requirement_residence ? this.findRegionIndex(region, requirement_residence) : [0, 0];
        // 小孩要求
        this.hasChildrenData = hasChildrenData;
        this.requirementHasChildrenChooseValue = requirement_has_children ? [hasChildrenData.indexOf(requirement_has_children)] : [0];
        // 购房要求
        this.requirementHousingStatusChooseValue = requirement_buying_status ? [housingStatusData.indexOf(requirement_buying_status)] : [0];
        // 购车要求
        this.requirementCarStatusChooseValue = requirement_car_status ? [carStatusData.indexOf(requirement_car_status)] : [0];

        this.photos_arr = photos_arr;
        this.photos_id = photos;
      } else {
        this.$common.doErrorResult(res);
      }
    })
  },

  methods: {
    findRegionIndex(region, str) {
      const [provinceName, cityName] = str.split('-'); // 分割字符串
      const provinceIndex = region.findIndex(item => item.name === provinceName); // 查找省下标
      let cityIndex = -1;

      if (provinceIndex !== -1) {
        cityIndex = region[provinceIndex].city_list.findIndex(city => city.name === cityName); // 查找市下标
      }

      return [provinceIndex, cityIndex]; // 返回省和市的下标
    },

    findKey(ageData, requirement_age) {
      const [startAge, endAge] = requirement_age.split('-').map(Number); // 分割并转换为数字
      const startIndex = ageData.indexOf(startAge); // 查找开始年龄下标
      const endIndex = ageData.indexOf(endAge); // 查找结束年龄下标
      return [startIndex, endIndex]; // 返回下标
    },

    setDynamicMargin() {
      const windowInfo = uni.getWindowInfo();
      this.titleMargin = windowInfo.statusBarHeight + 10; // 直接使用状态栏高度
    },

    back: function () {
      uni.navigateBack();
    },

    closeInfoModal: function () {
      this.infoModal = false
    },
    openInfoModal: function (type) {
      this.info_modal_type = type;
      this.infoModal = true
    },

    closePhotosModal: function () {
      this.photosModal = false;
    },
    openPhotosModal: function () {
      this.photosModal = true;
    },
    closeContactModal: function () {
      this.contactModal = false;
    },
    openContactModal: function () {
      this.contactModal = true;
    },

    // 字段修改 START

    // 姓名
    changeUsername: function (e) {
      this.basic_info.username = e.detail.value;
    },

    // 性别
    chooseGender: function (gender) {
      this.basic_info.gender = gender;
    },

    // 年份
    changeBirthDate: function (e) {
      var birth_date = e.detail.value,
        birth_year = birth_date.split('-')[0];

      this.basic_info.birth_date = birth_date;
      this.basic_info.birth_year = birth_year + '年';
    },

    closePopup: function () {
      this.popupType = '';
      this.popup = false;
    },

    openPopup: function (type) {
      this.popupType = type;
      this.popup = true;
    },

    bindChange: function (e) {
      var value = e.detail.value,
        popupType = this.popupType;

      switch (popupType) {
        case 'residence':
          this.residenceChooseValue = value;
          break;
        case 'hukou':
          this.hukouChooseValue = value;
          break;
        case 'height':
          this.heightChooseValue = value;
          break;
        case 'weight':
          this.weightChooseValue = value;
          break;
        case 'occupation':
          this.occupationChooseValue = value;
          break;
        case 'body_type':
          this.bodyTypeChooseValue = value;
          break;
        case 'marital_status':
          this.maritalStatusChooseValue = value;
          break;
        case 'education_level':
          this.educationLevelChooseValue = value;
          break;
        case 'company_type':
          this.companyTypeChooseValue = value;
          break;
        case 'annual_income':
          this.annualIncomeChooseValue = value;
          break;
        case 'housing_status':
          this.housingStatusChooseValue = value;
          break;
        case 'car_status':
          this.carStatusChooseValue = value;
          break;
        case 'requirement_age':
          this.requirementAgeChooseValue = value;
          break;
        case 'requirement_height':
          this.requirementHeightChooseValue = value;
          break;
        case 'requirement_body_type':
          this.requirementBodyTypeChooseValue = value;
          break;
        case 'requirement_marital_status':
          this.requirementMaritalStatusChooseValue = value;
          break;
        case 'requirement_education_level':
          this.requirementEducationLevelChooseValue = value;
          break;
        case 'requirement_annual_income':
          this.requirementAnnualIncomeChooseValue = value;
          break;
        case 'requirement_residence':
          this.requirementResidenceChooseValue = value;
          break;
        case 'requirement_has_children':
          this.requirementHasChildrenChooseValue = value;
          break;
        case 'requirement_buying_status':
          this.requirementHousingStatusChooseValue = value;
          break;
        case 'requirement_car_status':
          this.requirementCarStatusChooseValue = value;
          break;
      }
    },

    confirmChoose: function () {
      var popupType = this.popupType

      switch (popupType) {
        case 'residence':
          var region = this.region,
            residenceChooseValue = this.residenceChooseValue;
          this.basic_info.residence = region[residenceChooseValue[0]].name + '-' + region[residenceChooseValue[0]].city_list[residenceChooseValue[1]].name;
          break;
        case 'hukou':
          var region = this.region,
            hukouChooseValue = this.hukouChooseValue;
          this.basic_info.hukou = region[hukouChooseValue[0]].name + '-' + region[hukouChooseValue[0]].city_list[hukouChooseValue[1]].name;
          break;
        case 'height':
          this.basic_info.height = this.heightData[this.heightChooseValue];
          break;
        case 'weight':
          this.basic_info.weight = this.weightData[this.weightChooseValue];
          break;
        case 'occupation':
          this.basic_info.occupation = this.occupationData[this.occupationChooseValue];
          break;
        case 'body_type':
          this.basic_info.body_type = this.bodyTypeData[this.bodyTypeChooseValue];
          break;
        case 'marital_status':
          this.detail_info.marital_status = this.maritalStatusData[this.maritalStatusChooseValue];
          break;
        case 'education_level':
          this.detail_info.education_level = this.educationLevelData[this.educationLevelChooseValue];
          break;
        case 'company_type':
          this.detail_info.company_type = this.companyTypeData[this.companyTypeChooseValue];
          break;
        case 'annual_income':
          this.detail_info.annual_income = this.annualIncomeData[this.annualIncomeChooseValue];
          break;
        case 'housing_status':
          this.detail_info.housing_status = this.housingStatusData[this.housingStatusChooseValue];
          break;
        case 'car_status':
          this.detail_info.car_status = this.carStatusData[this.carStatusChooseValue];
          break;
        case 'requirement_age':
          var requirementAgeChooseValue = this.requirementAgeChooseValue.sort();
          this.requirementAgeChooseValue = requirementAgeChooseValue;
          this.requirement_info.requirement_age = this.ageData[requirementAgeChooseValue[0]] + '岁-' + this.ageData[requirementAgeChooseValue[1]] + '岁';
          break;
        case 'requirement_height':
          var requirementHeightChooseValue = this.requirementHeightChooseValue.sort();
          this.requirementHeightChooseValue = requirementHeightChooseValue;
          this.requirement_info.requirement_height = this.heightData[requirementHeightChooseValue[0]] + 'cm-' + this.heightData[requirementHeightChooseValue[1]] + 'cm';
          break;
        case 'requirement_body_type':
          this.requirement_info.requirement_body_type = this.bodyTypeData[this.requirementBodyTypeChooseValue];
          break;
        case 'requirement_marital_status':
          this.requirement_info.requirement_marital_status = this.maritalStatusData[this.requirementMaritalStatusChooseValue];
          break;
        case 'requirement_education_level':
          this.requirement_info.requirement_education_level = this.educationLevelData[this.requirementEducationLevelChooseValue];
          break;
        case 'requirement_annual_income':
          this.requirement_info.requirement_annual_income = this.annualIncomeData[this.requirementAnnualIncomeChooseValue];
          break;
        case 'requirement_residence':
          var region = this.region,
            requirementResidenceChooseValue = this.requirementResidenceChooseValue;
          this.requirement_info.requirement_residence = region[requirementResidenceChooseValue[0]].name + '-' + region[requirementResidenceChooseValue[0]].city_list[requirementResidenceChooseValue[1]].name;
          break;
        case 'requirement_has_children':
          this.requirement_info.requirement_has_children = this.hasChildrenData[this.requirementHasChildrenChooseValue];
          break;
        case 'requirement_buying_status':
          this.requirement_info.requirement_buying_status = this.housingStatusData[this.requirementHousingStatusChooseValue];
          break;
        case 'requirement_car_status':
          this.requirement_info.requirement_car_status = this.carStatusData[this.requirementCarStatusChooseValue];
          break;
      }

      this.closePopup();
    },

    // 保存
    saveUserDetails: function () {
      var info_modal_type = this.info_modal_type,// 1：基本信息，2：详细信息，3：择偶要求
        user_id = uni.getStorageSync('user_id');

      switch (info_modal_type) {
        case 1:
          var formData = this.basic_info;
          break;
        case 2:
          var formData = this.detail_info;
          break;
        case 3:
          var formData = this.requirement_info;
          break;
      }
      var info = this.info;

      formData.user_id = user_id;
      formData.info_modal_type = info_modal_type;

      this.$http.post('/index/Api/saveUserDetails', formData).then(res => {
        if (res.data.result == 1) {
          uni.showToast({
            title: res.data.msg
          })

          this.info = this.updateInfo(info, formData);
          this.infoModal = false;
        } else {
          this.$common.doErrorResult(res);
        }
      })
    },

    updateInfo: function (info, formData) {
      for (const key in formData) {
        // 确保 info 中存在对应的项
        if (info.hasOwnProperty(key)) {
          info[key] = formData[key];
        }
      }
      return info;
    },

    // 字段修改 END

    // 修改头像
    uploadAvatar: function () {
      this.$common.uploadImg(res => {
        if (res.id) {
          uni.showToast({
            title: '头像上传成功'
          })

          var avatar = res.id,
           avatar_path = res.path,
           user_id = uni.getStorageSync('user_id');

          uni.showLoading({
            title: '修改头像中...'
          })

          this.$http.post('/index/Api/saveUserAvatar', {user_id, avatar}).then(res => {
            if (res.data.result == 1) {
              this.info.avatar_path = avatar_path;
              this.info.avatar = avatar;

              var pages = getCurrentPages();
              var prevPage = pages[pages.length - 2];
              prevPage.$vm.info.avatar = avatar_path

              uni.showToast({
                title: res.data.msg
              })
            } else {
              this.$common.doErrorResult(res);
            }
          })

        } else {
          uni.showToast({
            title: '上传头像失败',
            icon: 'none'
          })
        }
      })
    },

    // 上传相册
    uploadPhotos: function () {
      var max_length = this.max_length, //最多上传图片数量
        photos_arr = this.photos_arr,
        photos_length = photos_arr.length,
        count = max_length - photos_length,
        photos_id = this.photos_id;

      if (count <= 0) {
        uni.showToast({
          title: '最多上传 ' + max_length + ' 张照片',
          icon: 'none'
        })
        return;
      }

      this.$common.uploadImgs(count, res => {
        res = JSON.parse(res);
        if (res.result == 1) {

          var {id, path} = res.data;

          photos_arr.push(res.data);

          if (photos_id == '') {
            photos_id = id;
          } else {
            photos_id += ',' + id;
          }

          var photos_length = photos_arr.length;

          this.photos_id = photos_id;
          this.photos_arr = photos_arr;

          uni.showToast({
            title: '上传成功',
            duration: 1000
          })
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },

    previewImgs: function (imgs, index){
      this.$common.previewImgs(imgs, index)
    },

    // 删除相册
    delPhoto: function (index) {
      var photos_arr = this.photos_arr;

      photos_arr.splice(index, 1);
      this.photos_arr = photos_arr;
      this.photos_id = photos_arr.map(item => item.id).join(',');

    },

    // 修改联系方式
    changeContact: function (e) {
      var value = e.detail.value,
        type = e.currentTarget.dataset.type;

      switch (type) {
        case 'wechat':
          this.contact_info.wechat = value;
          break;
        case 'qq':
          this.contact_info.qq = value;
          break;
        case 'mobile':
          this.contact_info.mobile = value;
          break;
      }
    },

    saveContact: function () {
      var user_id = uni.getStorageSync('user_id');

      var formData = this.contact_info;

      formData.user_id = user_id;

      this.$http.post('/index/Api/saveUserContact', formData).then(res => {
        if (res.data.result == 1) {
          uni.showToast({
            title: res.data.msg
          })

          this.contactModal = false;
        } else {
          this.$common.doErrorResult(res);
        }
      })
    },

    savePhotos: function () {
      var user_id = uni.getStorageSync('user_id'),
        photos_id = this.photos_id;

      this.$http.post('/index/Api/saveUserPhotos', {user_id, photos_id}).then(res => {
        if (res.data.result == 1) {
          uni.showToast({
            title: res.data.msg
          })

          this.photosModal = false;
        } else {
          this.$common.doErrorResult(res);
        }
      })
    },


  },
}
</script>

<style lang="scss">
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10rpx;

  .info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10rpx;

    .avatar {
      width: 180rpx;
      height: 180rpx;
      border-radius: 50%;
    }

    .name-box {
      display: flex;
      margin-top: 20rpx;
      align-items: center;

      .name {
        font-size: 40rpx;
      }

      .icon {
        width: 26rpx;
        height: 26rpx;
        margin-left: 10rpx;
      }
    }

    .id {
      font-size: 32rpx;
    }
  }

  .main-box {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 71vh;
    border-radius: 40rpx 40rpx 0 0;
    background: linear-gradient(to bottom, rgba(228, 67, 35, 0.8), rgba(216, 216, 216, 0.2));
    overflow: hidden;
    position: absolute;
    bottom: 0;

    .follow-box {
      display: flex;
      justify-content: space-between;
      width: 70%;
      padding-top: 40rpx;

      .tab-box {
        flex: 1;
        text-align: center;
        font-size: 40rpx;
        color: #fff;

        .count {
          margin-top: 10rpx;
        }
      }
    }

    .scroll {
      display: flex;
      width: 100%;
      align-items: center;
      flex-direction: column;
      height: 61vh;

      .info-box {
        padding: 20rpx 30rpx;
        width: 82%;
        background: #fff;
        border-radius: 20rpx;
        margin-top: 20rpx;

        .set-box {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .xx {
            font-size: 40rpx;
            color: #F30E0E;
          }

          .set {
            width: 30rpx;
            height: 30rpx;
            padding: 10rpx;
          }
        }

        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 32rpx;
          margin-top: 15rpx;

          .text {
            width: 50%;
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 超出隐藏 */
            text-overflow: ellipsis; /* 省略号 */
            flex-shrink: 0; // 防止被挤压
          }
        }
      }

      .btn-box {
        display: flex;
        margin-top: 20rpx;
        width: 90%;
        justify-content: space-around;

        .btn {
          text-align: center;
          font-size: 36rpx;
          font-weight: bold;
          padding: 10rpx 30rpx;
          border-radius: 50rpx;
          width: 200rpx;
        }

        .xc{
          background-color: #F30E0E;
          color: #fff;
        }
        .lx{
          background-color: #EDC80F;
        }
      }
    }
  }

  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;

    .modal {
      width: 80%;

      .modal-content {
        position: relative;
        background: #fff;
        padding: 20rpx;
        border-radius: 20rpx;
        max-height: 70vh;

        .close {
          position: absolute;
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          right: 20rpx;
          top: 20rpx;
        }

        .modal-title {
          position: absolute;
          font-size: 40rpx;
          color: #F30E0E;
          top: 60rpx;
          left: 20rpx;
        }

        .row-box {
          margin-top: 100rpx;

          .row {
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30rpx;
            font-size: 32rpx;

            &:last-child {
              margin-bottom: 0;
            }

            .input {
              margin-left: 100rpx;
              padding: 10rpx 20rpx;
              border: 2rpx solid #dad6d6;
              border-radius: 20rpx;
            }

            .sex-box {
              flex: 1;
              margin-left: 100rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .sex {
                flex: 1;
                padding: 10rpx 0;
                border: 2rpx solid #dad6d6;
                border-radius: 20rpx;
                margin-right: 20rpx;
                text-align: center;

                &:last-child {
                  margin-right: 0;
                }
              }

              .active {
                border: 2rpx solid #F30E0E;
              }

            }

            .res-box {
              display: flex;

              .res {
                flex: 1;
                margin-right: 20rpx;
                text-align: right;
              }

              .icon {
                width: 20rpx;
                height: 28rpx;
              }
            }
          }
        }

        .photos-box {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          width: 100%;
          margin-top: 130rpx;
          max-height: calc(70vh - 130rpx);

          .show-box {
            position: relative;
            width: 48%;
            margin-bottom: 10rpx;

            &:nth-last-child(1),
            &:nth-last-child(2) {
              margin-bottom: 0;
            }

            .del {
              position: absolute;
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              right: 0;
              top: 0;
            }

            .photo {
              width: 100%;
              height: 260rpx;
            }
          }
        }

      }

      .save-btn {
        background: #F30E0E;
        color: #fff;
        padding: 14rpx 0;
        text-align: center;
        border-radius: 20rpx;
        margin-top: 20rpx;
        flex: 1;
      }

      .btn-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .upload-btn {
          background: #fff;
          color: #000;
          padding: 14rpx 0;
          text-align: center;
          border-radius: 20rpx;
          margin-top: 20rpx;
          flex: 1;
          margin-right: 20rpx;
        }
      }

    }
  }


  // 年龄范围
  .popup-overlay {
    position: fixed;
    width: 100vw;
    right: 0;
    bottom: -100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 30;
    transition: bottom 0.3s ease; // 动画效果

    &.show {
      bottom: 0;
      top: 0;
    }

    .popup-content {
      background: white;
      padding: 20px;
      width: 100%;

      .top-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 32rpx;

        .confirm-btn {
          color: #F30E0E;
        }
      }

      .picker-view {
        width: 100%;
        height: 600rpx;
        margin-top: 20rpx;
      }

      .item {
        line-height: 100rpx;
        text-align: center;
      }
    }
  }

}
</style>
